<template>
  <div class="terms">
    <main id="mainPage" class="mainPage_pc_main_194P4">
      <div >
        <div   class="import-info pc_show">
          <img
            
            width="100%"
            height="130px"
            src="@/assets/image/shop_detail.png"
          />
          <div  class="btn"></div>
        </div>
        <div  class="wrap">
          <h1  class="title">
            {{$t('terms.terms1')}}
          </h1>
          <b  class="subTitle"
            >{{$t('terms.terms2')}}</b
          >
          <p  class="text">
            {{$t('terms.terms3')}}
            <a  href="https://mottecommerce.com"
              >{{$t('terms.a1')}}</a
            >{{$t('terms.a2')}}
          </p>
          <p  class="text">
            {{$t('terms.terms4')}}
          </p>
          <p  class="textTitle">{{$t('terms.terms5')}}</p>
          <p  class="text">
           {{$t('terms.terms6')}}
          </p>
          <p  class="textTitle">{{$t('terms.terms7')}}</p>
          <p  class="text">
            {{$t('terms.terms8')}}
          </p>
          <p  class="textTitle">{{$t('terms.terms9')}}</p>
          <p  class="text">
            {{$t('terms.terms10')}}
          </p>
          <p  class="text">
            {{$t('terms.terms11')}}
          </p>
          <p  class="text">
           {{$t('terms.terms12')}}
          </p>
          <p  class="text">
            {{$t('terms.terms13')}}
          </p>
          <p  class="textTitle">{{$t('terms.terms14')}}</p>
          <p  class="text">
            {{$t('terms.terms15')}}
          </p>
          <ul  class="list">
            <li >
              {{$t('terms.terms16')}}
            </li>
            <li >
              {{$t('terms.terms17')}}
            </li>
            <li >
              {{$t('terms.terms18')}}
            </li>
            <li >
              {{$t('terms.terms19')}}
            </li>
            <li >
              {{$t('terms.terms20')}}
            </li>
            <li >
              {{$t('terms.terms21')}}
            </li>
            <li >
              {{$t('terms.terms22')}}
            </li>
            <li >
              {{$t('terms.terms23')}}
            </li>
            <li >
              {{$t('terms.terms24')}}
            </li>
            <li >
              {{$t('terms.terms25')}}
            </li>
            <li >
              {{$t('terms.terms26')}}
            </li>
            <li >
             {{$t('terms.terms27')}}
            </li>
            <li >
              {{$t('terms.terms28')}}
            </li>
            <li >
              {{$t('terms.terms29')}}
            </li>
          </ul>
          <p  class="textTitle">
            {{$t('terms.terms31')}}
          </p>
          <p  class="text">
            {{$t('terms.terms32')}}
          </p>
          <p  class="text">
            {{$t('terms.terms33')}}
          </p>
          <p  class="textTitle">{{$t('terms.terms34')}}</p>
          <p  class="text">
            {{$t('terms.terms35')}}
          </p>
          <p  class="textTitle">
            {{$t('terms.terms36')}}
          </p>
          <ul  class="list">
            <li >
              {{$t('terms.terms37')}}
            </li>
            <li >
              {{$t('terms.terms38')}}
            </li>
            <li >
              {{$t('terms.terms39')}}
            </li>
            <li >
              {{$t('terms.terms40')}}
            </li>
          </ul>
          <p  class="textTitle">{{$t('terms.terms41')}}</p>
          <p  class="text">
            {{$t('terms.terms42')}}<a
              
              href="info@mottconsulting.co.jp"
              target="_blank"
            >
              {{$t('terms.a3')}}</a
            >
            , {{$t('terms.terms43')}}.
          </p>
          <p  class="textTitle">{{$t('terms.terms44')}}</p>
          <p  class="text">
           {{$t('terms.terms45')}}<br  />
            {{$t('terms.terms46')}}<a
              
              href="https://web.ecouponsx.com/app/Mottwebsite/html/PrivacyPolicy.html"
            >
              {{$t('terms.a4')}}</a
            >
          </p>
          <p  class="textTitle">{{$t('terms.terms47')}}</p>
          <p  class="text">
            {{$t('terms.terms48')}}
          </p>
          <p  class="textTitle">{{$t('terms.terms49')}}</p>
          <p  class="text">
           {{$t('terms.terms50')}}
          </p>
          <p  class="text">
            {{$t('terms.terms51')}}
          </p>
          <p  class="text">
            {{$t('terms.terms52')}}
          </p>
          <p  class="text">
            {{$t('terms.terms53')}}
          </p>
          <p  class="textTitle">{{$t('terms.terms54')}}</p>
          <p  class="text">
            {{$t('terms.terms55')}}
          </p>
          <p  class="textTitle">{{$t('terms.terms56')}}</p>
          <ul  class="list">
            <li >
              {{$t('terms.terms57')}}
            </li>
            <li >
              {{$t('terms.terms58')}}
            </li>
            <li >
              {{$t('terms.terms59')}}
              <a
                
                href="info@mottconsulting.co.jp"
                target="_blank"
              >
               {{$t('terms.a5')}}</a
              >.{{$t('terms.terms60')}}
            </li>
            <li >
              {{$t('terms.terms61')}}
            </li>
            <li >
              {{$t('terms.terms62')}}
            </li>
            <li >
             {{$t('terms.terms63')}}
            </li>
            <li >
              {{$t('terms.terms64')}}
            </li>
            <li >
              {{$t('terms.terms65')}}
            </li>
            <li >
              {{$t('terms.terms66')}}
            </li>
            <li >
              {{$t('terms.terms67')}}
            </li>
          </ul>
        </div>
        <my-footer/>
       
      </div>
    </main>
  </div>
</template>
<script>
import MyFooter from '../components/my-footer/my-footer.vue';
export default {
    components:{
        MyFooter
    }
};
</script>

<style lang="scss" scoped>
.mainPage_mb_content_2ozs2 {
    background: #f5f5f5;
    padding-bottom: calc(2.15rem + env(safe-area-inset-bottom));
    padding-bottom: calc(2.15rem + constant(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
}
@media only screen and (max-width: 900px) {
  .pc_show{
    display: none;
  }
  a{
    color: blue;
  }
		.wrap {
    padding: 1rem;
    text-align: center;
    color: #000;
}
.title {
    font-size: 1.1rem;
}
.list li {
    margin-bottom: .5333rem;
}
.subTitle {
    font-size: .8rem;
    margin-bottom: .2667rem;
    margin-top: .1333rem;
    display: inline-block;
}
.text, .textTitle {
    text-align: left;
    font-size: .7rem;
    margin-bottom: .5333rem;
}
.textTitle {
    font-weight: 700;
}
.list {
    font-size: .7rem;
    text-align: left;
}
ul,li {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
}
	}

	@media only screen and (min-width: 900px) {
    .mainPage_pc_main_194P4 {
    flex: 1;
    overflow-y: scroll;
    background: #f5f5f5;
}
.import-info {
    width: 100%;
    position: relative;
}
.import-info .btn {
    cursor: pointer;
    width: 79px;
    height: 28px;
    position: absolute;
    right: 17%;
    top: 38%;
    opacity: .2;
}
.wrap {
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    box-sizing: border-box;
    color: #595758;
}
.wrap {
    padding: 0 70px;
    width: 1400px;
    margin: 60px auto;
    margin-top: 60px;
    font-family: Roboto-Regular;
    font-size: 16px;
    line-height: 30px;
}
.wrap .title {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    margin-top: 50px;
    margin-bottom: 25px;
    font-size: 30px;
}
.wrap .title, .wrap {
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    box-sizing: border-box;
    color: #595758;
}
.wrap .subTitle, .wrap .text {
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    font-family: Roboto-Regular;
    font-size: 16px;
    color: #595758;
    line-height: 30px;
    box-sizing: border-box;
}
.wrap .subTitle {
    margin: 0 0 10px;
    margin-top: 30px;
    margin-bottom: 30px;
}
.wrap .text {
    margin: 0 0 10px;
}
.wrap .text {
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    font-family: Roboto-Regular;
    font-size: 16px;
    color: #595758;
    line-height: 30px;
    box-sizing: border-box;
}
.wrap .textTitle {
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    box-sizing: border-box;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 25px;
    color: #595758;
    margin-top: 50px;
    font-size: 22px;
}
ul {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
}
li,ul {
    font-weight: 400;
    margin: 0;
    padding: 0;
}
a{
    color: blue;
}
		
	}
</style>